<template>
  <div class="data-container">
    <div class="title">
      <div class="text">会员动态</div>
      <i class="icon el-icon-tickets" @click="handleDetail({})"></i>
    </div>
    <div class="line">
      <div class="line-left">
        <div class="tab-list">
          <div class="item" :class="{ active: active === 0 }" @click="handleTab(0)">昨天</div>
          <div class="item" :class="{ active: active === 1 }" @click="handleTab(1)">本周</div>
          <div class="item" :class="{ active: active === 2 }" @click="handleTab(2)">上周</div>
          <div class="item" :class="{ active: active === 3 }" @click="handleTab(3)">本月</div>
          <div class="item" :class="{ active: active === 4 }" @click="handleTab(4)">上月</div>
        </div>
        <el-date-picker value-format="yyyy-MM-dd" @change="handleChange" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </div>
      <div class="text-right">业绩{{ total }}元</div>
    </div>
    <div class="data-list">
      <div class="item item1" @click="handleDetail({ change: '新增' })">
        <div class="tag">新增</div>
        <div class="value">{{ infoAdd.total }}个|{{ infoAdd.money }}元</div>
        <div class="num-list">
          <div class="num-item">
            <div class="text-1">{{ infoAdd.value1 }}</div>
            <div class="text-2">至尊帝王</div>
          </div>
          <div class="num-item">
            <div class="text-1">{{ infoAdd.value2 }}</div>
            <div class="text-2">金钻</div>
          </div>
          <div class="num-item">
            <div class="text-1">{{ infoAdd.value3 }}</div>
            <div class="text-2">银钻</div>
          </div>
          <div class="num-item">
            <div class="text-1">{{ infoAdd.value4 }}</div>
            <div class="text-2">钻石</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="sub-item" @click="handleDetail({ change: '升级' })">
          <div class="tag">升级</div>
          <div class="value">{{ infoChange.up.num }}个|{{ infoChange.up.fee }}元</div>
        </div>
        <div class="sub-item" @click="handleDetail({ change: '续费' })">
          <div class="tag">续费</div>
          <div class="value">{{ infoChange.renew.num }}个|{{ infoChange.renew.fee }}元</div>
        </div>
      </div>
      <div class="item">
        <div class="sub-item" @click="handleDetail({ change: '降级' })">
          <div class="tag">降级</div>
          <div class="value">{{ infoChange.down.num }}个|{{ infoChange.down.fee }}元</div>
        </div>
        <div class="sub-item" @click="handleDetail({ change: '过期' })">
          <div class="tag">过期</div>
          <div class="value">{{ infoChange.over.num }}个</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiMemberAdd, apiMemberChange } from '@/api/industryData/index'
import { formatDate, getDay, beginOfWeek, endOfWeek, dateOfMonth, dateOfPrevMonth } from '@/utils'

export default {
  name: 'panel1',
  data() {
    return {
      active: 0,
      time: '',
      timer: null,
      infoAdd: {},
      infoChange: {
        up: { num: 0, fee: 0 },
        down: { num: 0, fee: 0 },
        over: { num: 0, fee: 0 },
        renew: { num: 0, fee: 0 },
      },
      dateList: [],
      total: 0,
    }
  },

  mounted() {
    this.init()
    this.getData()
  },
  methods: {
    init() {
      const today = new Date()
      this.dateList = [
        { name: '昨天', start: formatDate(getDay(-1), 'Y-M-D'), end: formatDate(getDay(-1), 'Y-M-D') },
        { name: '本周', start: beginOfWeek(today), end: endOfWeek(today) },
        { name: '上周', start: beginOfWeek(getDay(-7)), end: endOfWeek(getDay(-7)) },
        { name: '本月', start: dateOfMonth()[0], end: dateOfMonth()[1] },
        { name: '上月', start: dateOfPrevMonth()[0], end: dateOfPrevMonth()[1] },
      ]
    },
    // 获取数据
    getData() {
      let info = {}
      if (this.active >= 0) {
        info = {
          start_time: this.dateList[this.active].start,
          end_time: this.dateList[this.active].end,
        }
      } else {
        info = {
          start_time: this.time[0],
          end_time: this.time[1],
        }
      }
      this.total = 0
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiMemberAdd(formData).then((res) => {
        this.infoAdd = res.data
        this.total += this.infoAdd.money
      })

      apiMemberChange(formData).then((res) => {
        this.infoChange = res.data
        for (let key in this.infoChange) {
          this.total += this.infoChange[key].fee
        }
      })
    },
    // tab切换
    handleTab(index) {
      this.active = index
      this.getData()
    },
    onResize() {},
    handleDetail(query) {
      if (this.active >= 0) {
        query.start_time = this.dateList[this.active].start
        query.end_time = this.dateList[this.active].end
      } else {
        query.start_time = this.time[0]
        query.end_time = this.time[1]
      }
      query.source = 'hss'
      this.$router.push({
        name: 'MemberDynamics',
        query,
      })
    },
    handleChange() {
      this.active = -1
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  .icon {
    cursor: pointer;
  }
}
.line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .line-left {
    display: flex;
  }
}
.tab-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 4px;

  .item {
    width: 60px;
    height: 30px;
    border: 1px solid #ffffff;
    border-radius: 3px 0 0 3px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      border: 1px solid $mainColor;
      color: $mainColor;
    }
    &.active {
      border: 1px solid $mainColor;
      background: $mainColorOpcity;
      font-weight: bold;
      color: $mainColor;
    }

    &:last-child {
      margin-right: 0;
      border-radius: 0 3px 3px 0;
      border-left: none;
    }
  }
}
.el-date-editor {
  border-color: #ffffff;
  background: none;
  height: 30px;
  color: #ffffff;
  input {
    background: none;
  }
}
::v-deep .el-date-editor .el-range__icon {
  color: #ffffff !important;
  height: 30px;
  line-height: 30px !important;
}
::v-deep .el-range-editor .el-range-input {
  background: none;
  color: #ffffff;
}
::v-deep .el-date-editor .el-range-separator {
  color: #ffffff;
  height: 30px;
  line-height: 30px;
}

.data-list {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 32.5%;
    height: 100%;
    cursor: pointer;
    &.item1 {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      border: 1px solid $mainColor;
      border-radius: 3px;
      padding-top: 10px;
      .num-list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .num-item {
          text-align: center;
        }
      }
    }
    .value {
      font-size: 16px;
      color: #ffffff;
    }
    .sub-item {
      position: relative;
      width: 100%;
      height: calc(50% - 5px);
      border: 1px solid $mainColor;
      border-radius: 3px;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .tag {
      position: absolute;
      left: 0;
      top: 0;
      padding: 4px 10px;
      background: $mainColorOpcity;
      color: #ffffff;
      border-radius: 3px 0 3px 0;
    }
  }
}
</style>
